<#assign pageTitle="${course.courseName}"/>
<#assign pageKeywords = pageTitle />
<#assign pageDescription = pageTitle />
<#assign pageHeader>
    <link rel="stylesheet" type="text/css" href="/static/h5/css/course.css?20220210"/>
</#assign>
<#assign pageContent>
    <van-nav-bar
            title="${course.courseName}"
            left-text="返回"
            right-text="首页"
            left-arrow
            @click-left="location.href='/course/pro.html';"
            @click-right="location.href='/index.html';"
            fixed
            placeholder
    ></van-nav-bar>
    <div class="course-view-header">
        <img src="${course.cover!'/static/h5/images/course/article-list-2.jpg'}" alt="">
    </div>
    <div class="course-view-info">
        <div class="course-title">${course.courseName!}</div>
        <div class="course-price">
            <span>￥${course.price/100.0}</span>
            <del>￥${course.sourcePrice/100.0}</del>
        </div>
    </div>
    <div class="info-item">
        <span class="info-item-title">属性</span>
        <div>
            <dl class="content-item">
                <dt>${course.categoryName!}</dt>
            </dl>
            <dl class="content-item">
                <dt><span style="color: red;">${course.lessonNum}</span>课时</dt>
            </dl>
            <dl class="content-item">
                <dt>浏览<span style="color: red;">${course.viewCount}</span>次</dt>
            </dl>
        </div>
    </div>
    <div class="course-view-body">
        <van-tabs sticky scrollspy="true">
            <van-tab title="介绍">
                <div class="course-view-des">
                    <section class="course-txt-body">
                        ${course.context!}
                    </section>
                </div>
            </van-tab>
            <van-tab title="目录">
                <div class="course-view-step">
                    <#if courseNodeTree?? && courseNodeTree?size gt 0>
                    <dl class="step-item">
                        <#list courseNodeTree as parent>
                            <#if parent.nodeType gt 0>
                                <dt>
                                    <a href="/user/course/play.html?nodeId=${parent.nodeId}">
                                        <span class="step-title">${parent.name!}</span>
                                        <span class="step-btn">学习</span>
                                    </a>
                                </dt>
                            <#else>
                                <dt>${parent.name!}</dt>
                                <dd>
                                    <#if parent.children??>
                                    <#list parent.children as child>
                                    <a href="/user/course/play.html?nodeId=${child.nodeId}">
                                        <span class="step-title">${child.name!}</span>
                                        <#if child.free==1 && !isBuy>
                                            <#assign freeNodeId = child.nodeId>
                                            <span class="step-btn">试看</span>
                                        <#else>
                                            <#if child.progress gt 0>
                                                <span class="study-btn">已学</span>
                                            <#else>
                                                <span class="step-btn">学习</span>
                                            </#if>
                                        </#if>
                                    </a>
                                    </#list>
                                    </#if>
                                </dd>
                            </#if>
                        </#list>
                    </dl>
                    </#if>
                </div>
            </van-tab>
            <#if teachers??>
            <van-tab title="主讲">
                <#list teachers as teacher>
                <div class="content-author">
                    <div class="author-img"><img src="${teacher.avatar!'/static/images/user-img.jpg'}" alt=""></div>
                    <div class="author-name">${teacher.name!}</div>
                    <div class="author-info">${teacher.intro!}</div>
                </div>
                </#list>
            </van-tab>
            </#if>
            <#if courseList?? && courseList?size gt 0>
            <van-tab title="推荐">
                <div class="course-card mt-12">
                    <van-row gutter="20">
                        <#list courseList as item>
                        <van-col span="12">
                            <a href="/course/view/${item.courseId}.html">
                                <div class="course-pic"><img src="${item.cover!'/static/h5/images/course/article-list-1.jpg'}" alt=""></div>
                                <div class="course-info">
                                    <div class="course-name text-two">${item.courseName!}</div>
                                </div>
                                <div class="course-price">
                                    <div class="fl">${item.categoryName!}</div>
                                    <div class="fr">¥${item.price/100.0}</div>
                                </div>
                            </a>
                        </van-col>
                        </#list>
                    </van-row>
                </div>
            </van-tab>
            </#if>
        </van-tabs>
    </div>
    <div class="view-content-footer">
        <van-goods-action>
            <van-goods-action-icon :icon="isFavorite ? 'star' : 'star-o'" color="#ff5000" @click="doFavorite()">收藏</van-goods-action-icon>
            <van-goods-action-icon icon="share-o" text="分享" color="#ff5000" @click="doShare()"></van-goods-action-icon>
            <#if (isBuy?string=="false" && course.price >0)>
                <#if freeNodeId??>
                <van-goods-action-button type="warning" text="试看" @click="trySee"></van-goods-action-button>
                </#if>
                <van-goods-action-button type="danger" text="我要学习" @click="doBuy"></van-goods-action-button>
            <#else>
                <#if lastTimeStudyHistory??>
                    <van-goods-action-button type="danger" text="继续学习" url="/user/course/play.html?nodeId=${lastTimeStudyHistory.nodeId!}"></van-goods-action-button>
                <#else>
                    <van-goods-action-button type="danger" text="开始学习" url="/user/course/play.html?courseId=${course.courseId}"></van-goods-action-button>
                </#if>
            </#if>
        </van-goods-action>
    </div>
    <van-dialog v-model="buyDialog" @confirm="confirmBuy" theme="round-button" confirm-button-text="确认购买"  close-on-click-overlay="true">
        <#include "course-payment.ftl" />
    </van-dialog>
    <!--分享好友提示 s-->
    <div class="share-wechat-tips" v-show="showShare" @click="showShare=false">
        <div class="tips-arrow"></div>
        <div class="tips-title">立即分享给好友吧</div>
        <div class="tips-info">
            <p>点击屏幕右上角将本页面分享给好友</p>
            <p>好友购买一单，您将获得最低15%的现金奖励，可随时提现！</p>
        </div>
    </div>
</#assign>
<#assign pageScript>
    <script type="text/javascript" src="/static/libs/layer/mobile/layer.js"></script>
    <script type="text/javascript" src="/static/js/wxJSAPI.js"></script>
    <script type="text/javascript" src="/static/h5/js/order-h5.js"></script>
    <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
    <script>
        var courseId = ${course.courseId};
        var userId  = ${userId};
        var userMoney = ${userMoney};
        var thisUrl = location.href.toString();
        new Vue({
            el: '#app',
            data() {
                return {
                    showFooter: false,
                    activeTab: 0,
                    error: false,
                    buyDialog: false,
                    showShare: false,
                    isFavorite: ${isFavorite?c}
                }
            },
            created: function () {
                var that = this;
                if (wx) {
                    var data = new FormData();
                    data.append("url", encodeURIComponent(thisUrl));
                    axios.post("/ajax/share/create.json", data).then(function (json) {
                        if (json.data.code === 0) {
                            wx.config({
                                debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                                appId: json.data.appId, // 必填，公众号的唯一标识
                                timestamp: json.data.timeStamp, // 必填，生成签名的时间戳
                                nonceStr: json.data.nonceStr, // 必填，生成签名的随机串
                                signature: json.data.signature, // 必填，签名
                                jsApiList: [
                                    "updateAppMessageShareData",
                                    "updateTimelineShareData",
                                    "onMenuShareAppMessage",
                                    "onMenuShareTimeline"
                                ] // 必填，需要使用的JS接口列表
                            });
                            wx.ready(function () {
                                var shareOptions = {
                                    title: '${course.courseName}', // 分享标题
                                    desc: '${pageDescription}', // 分享描述
                                    link: thisUrl, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                                    imgUrl: 'https://www.dwvan.com${course.cover}', // 分享图标
                                    success: function () {
                                        console.log("分享成功");
                                    }
                                };
                                wx.updateAppMessageShareData(shareOptions);
                                wx.updateTimelineShareData(shareOptions);
                            })
                            wx.error(function (res) {
                                that.$toast(res);
                            });
                        }
                    });
                }
            },
            methods: {
                toView(courseId, nodeId) {
                    window.location.href = '/user/course/play.html?courseId=' + courseId + '&nodeId=' + nodeId;
                },
                doFavorite() {
                    if (userId < 1) {
                        return this.toLogin()
                    }
                    let that = this;
                    let url = '';
                    if (that.isFavorite) {
                        url = '/ajax/favorite/delete.json';
                    } else {
                        url = '/ajax/favorite/add.json';
                    }
                    axios.get(url, {
                        params: {
                            infoId: courseId,
                            typeId: 2
                        }
                    }).then(function (json) {
                        if (json.data.code === 0) {
                            that.isFavorite = !that.isFavorite;
                        }
                        that.$toast(json.data.msg);
                    }).catch(function (error) {
                        console.log(error);
                    });
                },
                doBuy() {
                    if (userId < 1) {
                        this.toLogin()
                    } else {
                        this.buyDialog = true;
                    }
                },
                trySee() {
                    if (userId < 1) {
                        this.toLogin()
                    } else {
                        window.location.href = '/user/course/play.html?nodeId=${freeNodeId!}';
                    }
                },
                confirmBuy() {
                    courseCreate(courseId);
                },
                toLogin() {
                    this.$toast({
                        message: '正在跳转登录中，请稍后...',
                        duration: 1000,
                        onClose: function () {
                            window.location.href = '/auth/login.html';
                        }
                    });
                },
                doShare() {
                    if (userId < 1) {
                        return this.toLogin();
                    }
                    this.showShare = true;
                }
            }
        })
    </script>
</#assign>
<#include "../layout_h5.ftl" />